<!--
 * @Author: Guiter 1336263157@qq.com
 * @Date: 2023-11-12 13:47:03
 * @LastEditors: Guiter 1336263157@qq.com
 * @LastEditTime: 2023-11-29 20:22:24
 * @FilePath: \nuxt3-music-player\src\layouts\default.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script lang="ts" setup>
import { refresh } from '~/server/api/login';
import { getUserPlaylist, getUserSubcount, getUseraccount } from '~/server/api/user';
import getNowFormatDate from '~/utils/times';

/* 展示登录界面 */
const loginShow = ref<boolean>(true);

/**
 * 改变登录的隐藏或者显示
 */
const changeLoginShow = (): void => {
  loginShow.value = !loginShow.value;
};

/**
 * 仓库
 */
const userStore = useUserStore();
const songsStore = useSongsStore();

/**
 * 检查用户的token
 */
const checkedUserToken = async (): Promise<void> => {
  if (userStore.token !== '') {
    const days = getNowFormatDate();
    if (userStore.days === '' || days !== userStore.days) {
      const res = await refresh();
      userStore.setToken(res.cookie);
      userStore.setDays(days);
    }
  } else {
    useMessage({
      message: '暂未登录',
      type: 'info'
    });
  }
};

/**
 * 获取用户的歌单
 */
const getSubcount = async (): Promise<void> => {
  const days = getNowFormatDate();
  console.log(days);
  if (userStore.token !== '' && days !== userStore.days) {
    console.log('进来了');
    /* 获取用户的个人数据 */
    const res = await getUseraccount();
    userStore.setUserInfo(res);
    /* 获取用户的歌单信息 */
    const data = await getUserPlaylist(res.userId);
    console.log(data);
    songsStore.setSongsList(data.playlist);
    const songsData = await getUserSubcount();
    songsStore.setSongs(songsData);
  }
};

onMounted(async () => {
  await checkedUserToken();
  await nextTick(async () => {
    await getSubcount();
  });
});
</script>

<template>
  <div class="absolute relative h-screen w-screen select-none font-sans">
    <div class="border-default h-full w-full">
      <div class="h-[calc(100%-6.25rem)] w-full flex">
        <Sidebar></Sidebar>
        <div class="h-full w-full flex flex-1 flex-col">
          <Header @change-login-show="changeLoginShow"></Header>
          <MainBody class="mb-2 box-border overflow-y-auto"></MainBody>
        </div>
      </div>
      <Footer></Footer>
    </div>

    <Transition name="fade">
      <Login v-if="!loginShow" class="h-full w-full" @change-login-show="changeLoginShow" />
    </Transition>
  </div>
</template>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
